{% extends "../base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="application-engine-source-package">
    <bk-table
        :data="packages"
        style="margin-top: 15px;">
        <bk-table-column label="版本" prop="version"></bk-table-column>
        <bk-table-column label="文件名" prop="package_name"></bk-table-column>
        <bk-table-column label="模块" prop="module.name"></bk-table-column>
        <bk-table-column label="文件大小" prop="package_size">
            <template slot-scope="props">
                $[ (props.row.package_size / Math.pow(2, 20)).toFixed(2) ] MB
            </template>
        </bk-table-column>
        <bk-table-column label="上传者" prop="owner"></bk-table-column>
        <bk-table-column label="上传时间" prop="updated"></bk-table-column>
        <!--以 docker 形式上传到 bkrepo 上的包不提供下载功能-->
        <bk-table-column label="操作" width="150">
            <template slot-scope="props">
                <bk-button v-if="props.row.storage_engine !== 'docker'" theme="primary" text @click="handleDownload(props.row)" >下载</bk-button>
                <span v-else v-bk-tooltips="{content: '以镜像方式存储不支持下载' }"> -- </span>
            </template>
        </bk-table-column>
    </bk-table>

    <bk-dialog v-model="dialog.visible" header-position="center" width="500" :confirm-fn="submitDialog" ok-text="删除">
        <div slot="header">
            即将删除源码包
        </div>
        <bk-form :label-width="120" :model="dialog.form">
            <bk-form-item label="模块" :required="true">
                <span> $[ dialog.form.module.name ]</span>
            </bk-form-item>
            <bk-form-item label="版本">
                <span> $[ dialog.form.version ]</span>
            </bk-form-item>
            <bk-form-item label="文件名">
                 <span> $[ dialog.form.package_name ]</span>
            </bk-form-item>
            <bk-form-item label="文件大小">
                 <span> $[ (dialog.form.package_size / Math.pow(2, 20)).toFixed(2) ] MB </span>
            </bk-form-item>
            <bk-form-item label="数字摘要">
                <span v-bk-tooltips="dialog.form.sha256_signature || '--'">$[ dialog.form.sha256_signature ? dialog.form.sha256_signature.substring(0, 8) : '--' ] </span>
            </bk-form-item>
            <bk-form-item label="上传者">
                 <span> $[ dialog.form.owner ]</span>
            </bk-form-item>
            <bk-form-item label="上传者">
                 <span> $[ dialog.form.updated ]</span>
            </bk-form-item>
        </bk-form>
    </bk-dialog>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const packages = {{ packages | to_json }}

    const moduleList = {{ module_list | to_json }}

    const URLRouter = {
        list: decodeURI("{% url 'admin.applications.engine.source_packages.list' application.code %}"),
        download: decodeURI("{% url 'admin.applications.engine.source_packages.detail' application.code '${module}' '${id}' %}"),
        detail: decodeURI("{% url 'admin.applications.engine.source_packages.detail' application.code '${module}' '${id}' %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            mixins: [SubmitMixin],
            el: "#application-engine-source-package",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    application,
                    moduleList,
                    packages,
                    dialog: {
                        visible: false,
                        type: "create",
                        form: {
                            id: '',
                            module: '',
                            environment_name: '',
                            domain_name: '',
                            https_enabled: false
                        },
                        row: undefined
                    }
                }
            },
            mounted: function () {
                console.log("mounted", this)
            },
            methods: {
                fetchSourcePackageList: async function () {
                    await this.$http.get(URLRouter.list).then(({results}) => {
                        this.packages = results
                    })
                },
                handleCreate: function () {
                    this.dialog.type = "create"
                    this.dialog.visible = true

                    this.dialog.form = {

                    }

                },
                handleDownload: function (row) {
                    let url_template = URLRouter['download']
                    let url = this.fillUrlTemplate(url_template, {form: row})
                    open(url)
                },
                handleDelete: function (row) {
                    this.dialog.type = "delete"
                    this.dialog.visible = true
                    this.dialog.form = {
                        ...row,
                    }
                },
                fillUrlTemplate: function (url_template, {form}) {
                  return url_template.replace("${module}", form.module.name).replace("${id}", form.id)
                },
                submitCallback: function () {
                    this.fetchSourcePackageList()
                }
            }
        })
    })
</script>
{% endblock %}
